import { PureComponent } from 'react';
import {
    Modal,
    Table,
    Transfer, 
    Switch, 
} from 'antd';

import difference from 'lodash/difference';


const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
  <Transfer {...restProps} showSelectAll={false}>
    {({
      direction,
      filteredItems,
      onItemSelectAll,
      onItemSelect,
      selectedKeys: listSelectedKeys,
      disabled: listDisabled,
    }) => {
      const columns = direction === 'left' ? leftColumns : rightColumns;

      const rowSelection = {
        getCheckboxProps: item => ({ disabled: listDisabled || item.disabled }),
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows
            .filter(item => !item.disabled)
            .map(({ key }) => key);
          const diffKeys = selected
            ? difference(treeSelectedKeys, listSelectedKeys)
            : difference(listSelectedKeys, treeSelectedKeys);
          onItemSelectAll(diffKeys, selected);
        },
        onSelect({ key }, selected) {
          onItemSelect(key, selected);
        },
        selectedRowKeys: listSelectedKeys,
      };

      return (
        <Table
          rowSelection={rowSelection}
          columns={columns}
          dataSource={filteredItems}
          size="small"
          style={{ pointerEvents: listDisabled ? 'none' : null }}
          onRow={({ key, disabled: itemDisabled }) => ({
            onClick: () => {
              if (itemDisabled || listDisabled) return;
              onItemSelect(key, !listSelectedKeys.includes(key));
            },
          })}
        />
      );
    }}
  </Transfer>
);


class UserAuthModel extends PureComponent {
  	state = {
	    targetKeys: [],
	    disabled: false,
	    showSearch: false,
	    userData: [],
   	};
    constructor(props) {
		super(props);
    }
 
    componentWillReceiveProps(nextProps) {
		if(undefined != nextProps.userChild && nextProps.userChild.list !== this.props.userChild.list) {
	      this.setState({userData: nextProps.userChild.list});
		}
		
		if(undefined != nextProps.userSelect && nextProps.userSelect.list !== this.props.userSelect.list) {
	      this.setState({targetKeys: nextProps.userSelect.list});
		}
	}
    
  	leftTableColumns = [
        {
	        title: '用户名',
	        dataIndex: 'user_name',
        }, 
        {
	        title: '用户名称',
	        dataIndex: 'user_name_cn',
        },        
        {
	        title: '手机号码',
	        dataIndex: 'phone',
        },
	];

	rightTableColumns = [
	    	{
	        title: '用户名',
	        dataIndex: 'user_name',
        }, 
        {
	        title: '用户名称',
	        dataIndex: 'user_name_cn',
        },        
        {
	        title: '手机号码',
	        dataIndex: 'phone',
        },
	];
	
  onChange = nextTargetKeys => {
    this.setState({ targetKeys: nextTargetKeys });
  };

  triggerDisable = disabled => {
    this.setState({ disabled });
  };

  triggerShowSearch = showSearch => {
    this.setState({ showSearch });
  };
	render() {
		const { userAuthVisible,handleUserAuthVisible,handleUserAuthConnect} = this.props;
		const { targetKeys, disabled, showSearch,userData } = this.state;
		return (
			<Modal
			width={1000}
			destroyOnClose
			title="用户角色授权"
			visible={userAuthVisible}
			onOk={() => handleUserAuthConnect(targetKeys)}
			onCancel={() => handleUserAuthVisible()}
			>
		
		      <div>
		        <TableTransfer
		        	titles={['未授权', '已授权']}
		          dataSource={userData}
		          targetKeys={targetKeys}
		          disabled={disabled}
		          showSearch={showSearch}
		          filterOption={(inputValue, item) => 
		          	item.user_name.indexOf(inputValue) > -1
		          }
		          onChange={this.onChange}
		          leftColumns={this.leftTableColumns}
		          rightColumns={this.rightTableColumns}
		        />
		        <Switch
		          unCheckedChildren="disabled"
		          checkedChildren="disabled"
		          checked={disabled}
		          onChange={this.triggerDisable}
		          style={{ marginTop: 16 }}
		        />
		        <Switch
		          unCheckedChildren="showSearch"
		          checkedChildren="showSearch"
		          checked={showSearch}
		          onChange={this.triggerShowSearch}
		          style={{ marginTop: 16 }}
		        />
		      </div>
    
			</Modal>
			)
	}
}

export default UserAuthModel;